/**
 * System Skeleton
 */

import React from 'react';
import css from './SystemSkeleton.css';
import { isRoot } from 'stripes-config';
import { Loading } from '@folio/stripes/components';


const SystemSkeleton = () => (
  <div className={css.skeleton}>
    {(window.__POWERED_BY_QIANKUN__ && !isRoot) ? null : (
      <header className={css.skeletonHeader}>
        <section className={css.skeletonHeaderStart}>
          <span className={css.skeletonAppIcon} />
          <span className={css.skeletonBar} />
        </section>
        <section className={css.skeletonHeaderEnd}>
          <span className={css.skeletonDivider} />
          <span className={css.skeletonCircle} />
        </section>
      </header>
    )}
    <div className={css.content}>
      <Loading size="xlarge" />
    </div>
  </div>
);

export default SystemSkeleton;
